import styles from './index.css';
import React, { useEffect, useState } from 'react';
import { IproFormProps, ProForm } from '@/components/ProForm';
import { Button, Form, Select } from 'antd';
import moment from 'moment';
import { translate } from './form.translate';

const { Option } = Select;
const json = require('./form.json');

export default function () {
  const [jsonObj, setJsonObj] = useState<IproFormProps<any> | null>(null);

  const residences = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  const tailformitemlayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 2,
      },
    },
  };
  const [form] = Form.useForm();
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  const onFinish = (values: any) => {
    values.date = moment(values.date).format('YYYY-MM-DD');
    values.RangePicker = [
      moment(values.RangePicker[0]).format('YYYY-MM-DD'),
      moment(values.RangePicker[1]).format('YYYY-MM-DD'),
    ];
    values.RangePicker1 = [
      moment(values.RangePicker1[0]).format('YYYY-MM-DD HH:mm:ss'),
      moment(values.RangePicker1[1]).format('YYYY-MM-DD HH:mm:ss'),
    ];
    console.log('Received values of form: ', values);
  };
  const onFinishFailed = ({ values, errorFields, outOfDate }: any) => {
    console.log(values, errorFields, outOfDate);
  };
  const server: any = {
    'Input.Passwordpassword': {
      parameter: {
        ...tailformitemlayout,
      },
    },
    'Input.Passwordconfirm': {
      parameter: {
        ...tailformitemlayout,
        rules: [
          {
            required: true,
            message: 'Please confirm your password!',
          },
          ({ getFieldValue }: any) => ({
            validator(_: any, value: string) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(
                new Error('The two passwords that you entered do not match!'),
              );
            },
          }),
        ],
      },
    },
    Cascaderresidence: {
      parameter: {
        ...tailformitemlayout,
      },
      cascaderParameter: {
        options: residences,
      },
    },
    Inputphone: {
      parameter: {
        ...tailformitemlayout,
      },
      inputParameter: {
        addonBefore: prefixSelector,
      },
    },
    Selectphone: {
      parameter: {
        ...tailformitemlayout,
      },
      selectParameter: {
        optionArr: [
          {
            value: 'aaa',
            label: 'aaa',
          },
        ],
      },
    },
    DatePickerdate: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    InputNumberinputNumber: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    SwitchSwitch: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    'Input.TextAreaTextArea': {
      parameter: {
        ...tailformitemlayout,
      },
    },
    RangePickerRangePicker: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    RangePickerRangePicker1: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    SliderSlider: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    TimePickerTimePicker: {
      parameter: {
        ...tailformitemlayout,
      },
    },
    formParameter: {
      form,
      onFinish: onFinish,
      onFinishFailed: onFinishFailed,
      initialValues: {
        residence: ['zhejiang', 'hangzhou', 'xihu'],
        prefix: '86',
      },
    },
    actionParameter: (
      <>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Register
          </Button>
        </Form.Item>
      </>
    ),
  };

  useEffect(() => {
    json && setJsonObj(translate(json, server));
  }, []);

  useEffect(() => {
    setTimeout(() => {
      form.setFieldsValue({
        residence: ['zhejiang', 'hangzhou', 'xihu'],
        prefix: '86',
        email: 'aaa@163.com',
      });
    }, 4000);
  }, []);

  return <>{jsonObj && <ProForm {...jsonObj} />}</>;
}
